<!-- 财务管理 收支统计 -->
<template>
<view style="height: 100vh;">
<layout index="/pages/scm/index/index">
  <view class="carbon-container">
    <!-- 查询表单 -->
    <van-collapse v-model="activeCollapse" class="search-panel">
      <van-collapse-item title="筛选条件" name="search">
        <van-form @submit="handleQuery" class="search-form">
          <van-field
            label="合同年份"
            label-width="4em"
            readonly
            clickable
            :value="queryParams.year"
            placeholder="选择年份"
            @click="showYearPicker = true"
          >
            <template #button>
              <van-icon name="calendar-o" color="#2a9d8f" />
            </template>
          </van-field>
          <van-popup v-model:show="showYearPicker" position="bottom">
            <van-datetime-picker
              type="year"
              title="选择年份"
              :min-date="minDate"
              :max-date="maxDate"
              @confirm="onYearConfirm"
              @cancel="showYearPicker = false"
              :formatter="formatter"
            />
          </van-popup>

          <div class="form-buttons">
            <van-button round type="primary" color="#2a9d8f" native-type="submit" class="search-button">
              搜索
            </van-button>
            <van-button round plain color="#2a9d8f" @click="resetQuery" class="reset-button">
              重置
            </van-button>
          </div>
        </van-form>
      </van-collapse-item>
    </van-collapse>

    <!-- 统计切换 -->
    <van-tabs v-model:active="activeName" title-active-color="#2a9d8f" color="#76c893">
      <van-tab title="季度统计">
        <scroll-view scroll-x class="table-scroll">
          <view class="carbon-table">
            <view class="table-header bg-primary">
              <text class="header-item">季度</text>
              <text class="header-item">采购合同金额</text>
              <text class="header-item">采购退款金额</text>
              <text class="header-item">销售合同金额</text>
              <text class="header-item">销售退款金额</text>
              <text class="header-item">总收入</text>
              <text class="header-item">总支出</text>
            </view>
            <view 
              v-for="(item, index) in quarterList"
              :key="index"
              class="table-row"
              :class="index % 2 === 0 ? 'bg-even' : 'bg-odd'"
            >
              <text class="row-item">{{ item.quarter }}</text>
              <text class="row-item amount">¥{{ item.purchaseContractTotal }}</text>
              <text class="row-item amount">¥{{ item.purchaseReturnTotal }}</text>
              <text class="row-item amount">¥{{ item.saleContractTotal }}</text>
              <text class="row-item amount">¥{{ item.saleReturnTotal }}</text>
              <text class="row-item amount">¥{{ item.incomeTotal }}</text>
              <text class="row-item amount">¥{{ item.outcomeTotal }}</text>
            </view>
          </view>
        </scroll-view>
      </van-tab>
      <van-tab title="月份统计">
        <scroll-view scroll-x class="table-scroll">
          <view class="carbon-table">
            <view class="table-header bg-primary">
              <text class="header-item">月份</text>
              <text class="header-item">采购合同金额</text>
              <text class="header-item">采购退款金额</text>
              <text class="header-item">销售合同金额</text>
              <text class="header-item">销售退款金额</text>
              <text class="header-item">总收入</text>
              <text class="header-item">总支出</text>
            </view>
            <view 
              v-for="(item, index) in monthList"
              :key="index"
              class="table-row"
              :class="index % 2 === 0 ? 'bg-even' : 'bg-odd'"
            >
              <text class="row-item">{{ item.month }}</text>
              <text class="row-item amount">¥{{ item.purchaseContractTotal }}</text>
              <text class="row-item amount">¥{{ item.purchaseReturnTotal }}</text>
              <text class="row-item amount">¥{{ item.saleContractTotal }}</text>
              <text class="row-item amount">¥{{ item.saleReturnTotal }}</text>
              <text class="row-item amount">¥{{ item.incomeTotal }}</text>
              <text class="row-item amount">¥{{ item.outcomeTotal }}</text>
            </view>
          </view>
        </scroll-view>
      </van-tab>
    </van-tabs>

    <!-- 空状态 -->
    <van-empty
      v-if="quarterList.length === 0 && monthList.length === 0"
      description="暂无数据"
      image="/static/empty.png"
      class="empty-state"
    />
  </view>
</layout>
</view>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';

// 模拟季度数据
const quarterList = ref([
  {
    quarter: '2023-Q1',
    purchaseContractTotal: '500,000.00',
    purchaseReturnTotal: '20,000.00',
    saleContractTotal: '800,000.00',
    saleReturnTotal: '10,000.00',
    incomeTotal: '780,000.00',
    outcomeTotal: '480,000.00',
  },
  {
    quarter: '2023-Q2',
    purchaseContractTotal: '600,000.00',
    purchaseReturnTotal: '15,000.00',
    saleContractTotal: '900,000.00',
    saleReturnTotal: '5,000.00',
    incomeTotal: '895,000.00',
    outcomeTotal: '585,000.00',
  },
]);

// 模拟月度数据
const monthList = ref([
  {
    month: '2023-01',
    purchaseContractTotal: '200,000.00',
    purchaseReturnTotal: '5,000.00',
    saleContractTotal: '300,000.00',
    saleReturnTotal: '2,000.00',
    incomeTotal: '298,000.00',
    outcomeTotal: '195,000.00',
  },
  {
    month: '2023-02',
    purchaseContractTotal: '150,000.00',
    purchaseReturnTotal: '3,000.00',
    saleContractTotal: '250,000.00',
    saleReturnTotal: '1,000.00',
    incomeTotal: '249,000.00',
    outcomeTotal: '147,000.00',
  },
]);

// 查询参数
const queryParams = reactive({
  year: new Date().getFullYear().toString(),
});

// 年份选择器
const minDate = new Date(2020, 0, 1);
const maxDate = new Date(2030, 11, 31);
const showYearPicker = ref(false);

// 格式化年份
const formatter = (type, val) => {
  if (type === 'year') return `${val}年`;
  return val;
};

// 确认选择年份
const onYearConfirm = (value) => {
  queryParams.year = value.getFullYear().toString();
  showYearPicker.value = false;
};

// 查询处理
const handleQuery = () => {
  console.log('查询参数:', queryParams);
};

// 重置查询
const resetQuery = () => {
  queryParams.year = new Date().getFullYear().toString();
  handleQuery();
};

// 当前激活的标签页
const activeName = ref('first');

// 控制折叠面板的展开状态
const activeCollapse = ref(['search']);

// 初始化数据
onMounted(() => {
  handleQuery();
});
</script>

<style lang="scss">
.carbon-container {
  background-color: #f5fbf8; /* 页面背景色 */
  min-height: 100vh;
  padding: 20rpx;
  font-family: 'Arial', sans-serif;

  .search-panel {
    margin-bottom: 20rpx;
    border-radius: 16rpx;
    overflow: hidden;
    box-shadow: 0 4rpx 12rpx rgba(42, 157, 143, 0.1);

    .search-form {
      padding: 20rpx;

      .form-field {
        margin-bottom: 20rpx;
        border: 1px solid #e8f5f2;
        border-radius: 8rpx;
        background-color: #fff;

        &::after {
          border: none;
        }
      }

      .form-buttons {
        display: flex;
        justify-content: space-around;

        .search-button,
        .reset-button {
          width: 45%;
          height: 80rpx;
          font-size: 28rpx;
          line-height: 80rpx;
        }
      }
    }
  }

  .table-scroll {
    width: 100%;
    overflow-x: auto;
    white-space: nowrap;

    .carbon-table {
      min-width: 1200rpx; /* 确保表格宽度足够容纳所有列 */
      margin: 20rpx;
      border-radius: 16rpx;
      overflow: hidden;
      box-shadow: 0 4rpx 12rpx rgba(42, 157, 143, 0.1);

      .table-header {
        background-color: #2a9d8f; /* 表头背景色 */
        padding: 24rpx;
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        gap: 10rpx;

        .header-item {
          text-align: center;
          color: #fff; /* 表头文字颜色 */
          font-size: 28rpx;
          font-weight: 500;
          white-space: nowrap;
        }
      }

      .table-row {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        gap: 10rpx;
        padding: 20rpx;
        transition: all 0.3s;

        .row-item {
          text-align: center;
          font-size: 26rpx;
          color: #2a5d52; /* 表格内容文字颜色 */
          white-space: nowrap;

          &.amount {
            color: #76c893; /* 金额文字颜色 */
            font-weight: 500;
          }
        }

        &:active {
          background-color: #e8f5f2; /* 点击时的背景色 */
        }
      }

      .bg-even {
        background-color: #fff; /* 偶数行背景色 */
      }

      .bg-odd {
        background-color: #f8fcfb; /* 奇数行背景色 */
      }
    }
  }

  .pagination {
    display: flex;
    justify-content: center;
    padding: 20rpx 0;

    .pagination-component {
      --van-pagination-item-active-background-color: #2a9d8f;
      --van-pagination-item-active-color: #fff;
    }
  }

  .empty-state {
    margin-top: 100rpx;
  }
}
</style>